<template>
  <div class="bless-message bless-gift">
   <div class="bless-close">
     <img src="../assets/icon/close.png" alt="" class="close" @click="$emit('close_message_box',0)">
   </div>
    <div class="container">
        <div class="swiper-wrapper gift_list ">
          <div class="swiper-slide" v-for="(slide,index_0) in gift_list" :key="index_0">
            <div class="gift_item" v-for="(item, index_1) in slide" :class="{ gift_item_active:item.order_id==select_order_id}" @click="select_gift(index_0, index_1)" :key="index_1">
              <div class="thumb heartBeat"><img :src="item.thumb" alt=""></div>
              <div class="title">{{ item.count }} {{ item.unit }} {{ item.title }}</div>
              <div class="add_min"><span :class="{disable_min: item.disable_min}" @click="min_price(index_0, index_1)">-</span><span @click="add_price(index_0,index_1)">+</span></div>
              <div class="message_button price">￥{{ item.price }}</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      <div class="love-button message_button"><button @click="send_gift_confirm">送礼物</button></div>
    </div>
    <bless-gift-confirm v-if="gift_confirm" @bless_gift_reload="bless_gift_reload" @close_confirm="gift_confirm_click" :gift_order_id="gift_order_id"/>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import BlessGiftConfirm from '@/components/bless-gift-confirm'
  export default {
    name: 'bless-gift',
    data() {
      return {
        select_index: 0,
        gift_confirm: false,
        gift_order_id: 0,
      }
    },
    components: {
      BlessGiftConfirm,
    },
    computed: {
        gift_list: function () {
            return this.$store.state.bless.gift_list
        },
        send_gift: function () {
            return this.$store.getters.get_select_gift
        },
        select_order_id: function () {
            return this.$store.getters.get_select_gift.order_id
        }
    },
    mounted() {
      const mySwiper = new Swiper('.container', {
        autoplay: false,
        direction: 'horizontal',
        pagination: {
          el: '.swiper-pagination',
          bulletClass : 'gift-bullet',//需设置.my-bullet样式
          bulletActiveClass: 'gift-bullet-active',
        },
        slidesPerView : 1,
        slidesPerGroup : 1,
        })
    },
    created() {
    //get gift list
    },
    methods: {
        bless_gift_reload(data) {
            this.$emit('bless_gift_reload', data)
        },
        send_gift_confirm: function() {
            let that = this
            this.$store.dispatch('send_gift_confirm')
                .then(res => {
                    let id = res.data.data;
                    console.log(id + '订单id');
                    that.gift_order_id = id
                    that.gift_confirm =true
                })
                .catch(function () {
                    console.log('支付订单未生成')
                })
        },
        select_gift: function (index_0, index_1) {
            //这边数据复原一次
            let data = {
                index_0: index_0,
                index_1: index_1,
            }
            this.$store.commit('set_selected_gift', data)
        },
        min_price: function (index_0, index_1) {
            this.$store.commit('gift_list_min_price', [index_0, index_1])
        },
        add_price: function (index_0, index_1) {
            this.$store.commit('gift_list_add_price', [index_0, index_1])
        },
        gift_confirm_click(val) {
          this.gift_confirm = !this.gift_confirm
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped lang="scss">
  .bless-message {position: fixed; width: 100%; height: 100%; background-color: rgba(90, 67, 152, 0.7);  top: 0;z-index: 9;display: inline-flex; align-items: center;justify-content: center;align-content: center;text-align: center; flex-wrap: wrap}
  .container {width: 76%;;background: #fff0ef;position: relative;overflow: hidden;border: #fff0ef 2rem solid; border-color: rgba(90,90,90,0)}
  .bless-close {position: relative;width: 76%;margin-right: -4rem;}
  .message_button { height: 25%;}
  .message_button button {font-size: 1.4rem; width: 85%; margin-top: 2%;}
  .gift_list {width: 100%;white-space: nowrap;}
  .swiper-slide {display: inline-flex; flex-wrap: wrap; vertical-align: top;}
  .gift_item { display:inline-block;width: 43%; border-radius: 5%; border: #de5b52 2px solid;margin: 2% auto;overflow: hidden}
  .gift_item .title {font-size: 1.2rem; color: #de5b52;padding: 0.3rem 0;}
  .gift_item .thumb,.gift_item img {width: 100%;height: auto}
  .gift_item .add_min {width: 100%;padding: 0.3rem 0;}
  .gift_item .add_min>span {color: #de5b52; width: 30%;margin:0 3%;font-size: 12px; border: #de5b52 1px solid;display: inline-block; border-radius: 5%;}
  .gift_item .price {color: #de5b52}
  .gift_item_active, .gift_item_active .add_min>span { border-color: #5a4398}
  .gift_item_active .title, .gift_item_active .add_min>span, .gift_item_active .price{color: #5a4398}
  .gift_item_active .disable_min {color: #cbb7ff!important; border-color: #cbb7ff!important;}
  @-webkit-keyframes heartBeat {
      0% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }

      14% {
          -webkit-transform: scale(1.3);
          transform: scale(1.3);
      }

      28% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }

      42% {
          -webkit-transform: scale(1.3);
          transform: scale(1.3);
      }

      70% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }
  }

  @keyframes heartBeat {
      0% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }

      14% {
          -webkit-transform: scale(1.3);
          transform: scale(1.3);
      }

      28% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }

      42% {
          -webkit-transform: scale(1.3);
          transform: scale(1.3);
      }

      70% {
          -webkit-transform: scale(1);
          transform: scale(1);
      }
  }

  .gift_item_active .heartBeat {
      -webkit-animation-name: heartBeat;
      animation-name: heartBeat;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
  }
</style>
